import AceEditor from 'react-ace';
import * as ace from 'ace-builds'
// import 'ace-builds/src-noconflict/mode-python'
// import "ace-builds/src-noconflict/snippets/python"
import 'ace-builds/src-noconflict/theme-solarized_light'
import 'ace-builds/src-noconflict/ext-language_tools'
import { useRef, useState } from 'react';
import { Button } from 'antd';
import '../assets/css/aceEdit.css'
ace.config.set('basePath', 'path')
const ReactAceEdit = (props) => {
  const editRef=useRef()
  const onChange = (newValue) => {
    console.log('change')
    props.SetInputText(newValue)
   
  }
  const getValue = () => {
    if (props.value) {
      props.runit()
    }
    
  }
  // 撤销
  const cancel=()=> {
    if (props.value) {
      let { undo } = editRef.current.editor.commands.commands;
      undo.exec(editRef.current.editor);
      console.log(editRef.current.editor);
    }
  }
  const overAgain=()=> {
    if (props.value) {
      props.SetInputText('')
    }
  }
 
  return (
    <div className="ace_contain">
      <AceEditor
        ref={ editRef}
        mode={props.mode}
        theme="solarized_light"
        onChange={onChange}
        value={props.value}
        name="UNIQUE_ID_OF_DIV"
        editorProps={{
          $blockScrolling: true
        }}
        wrapEnabled
        setOptions={{
          enableBasicAutocompletion: true,
          enableSnippets: true,
          enableLiveAutocompletion: true,
          fontSize: 20,
          showPrintMargin: false, //去除编辑器里的竖线
        }}
        width='100%'
        height='100%'
      />
     
      <div className="ace_option">
      <Button type="primary" onClick={getValue }>运行</Button>
        <Button type="primay" className="palette-red-5" onClick={cancel }>撤销</Button>
        <Button type="primary" ghost onClick={overAgain}>重做</Button>
        
      </div>
      <div className="fullScreen" onClick={() => { props.SetIsShow()}}>全屏</div>
            </div>
  )
}
export default ReactAceEdit